<template>
    <view class="edit-container page-container">
        <custom-nav-bar title="完善资料" :show-back="true">
        </custom-nav-bar>
        <view class="content">
            <view class="avatar-section">
                <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <image class="avatar" :src="avatarUrl" mode="aspectFill" />
                    <text class="avatar-tip">点击选择微信头像</text>
                </button>
            </view>
            <view class="nickname-section">
                <input class="nickname-input" type="nickname" v-model="nickname" placeholder="请输入新昵称" />
            </view>
            <button class="save-btn" @tap="saveProfile">保存</button>
        </view>
    </view>
</template>

<script setup>
import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue'
import { ref, onMounted } from 'vue'
import { userApi } from '@/api/index'
import request from '@/utils/request'

const avatarUrl = ref('')
const nickname = ref('')

onMounted(() => {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
        avatarUrl.value = userInfo.avatarUrl
        nickname.value = userInfo.nickname || ''
    }
})

// 保存资料
const saveProfile = async () => {
    const userInfo = uni.getStorageSync('userInfo')
    if (!userInfo) {
        uni.showToast({ title: '请先登录', icon: 'none' })
        return
    }

    try {
        const res = await userApi.updateUser({
            id: userInfo.id,
            openid: userInfo.openid,
            nickname: nickname.value,
            avatarurl: avatarUrl.value
        })

        // 更新本地存储
        userInfo.nickname = nickname.value
        userInfo.avatarurl = avatarUrl.value
        uni.setStorageSync('userInfo', userInfo)

        uni.showToast({ title: '资料已更新', icon: 'success' })
        setTimeout(() => {
            uni.navigateBack()
        }, 800)
    } catch (error) {
        uni.showToast({
            title: error.message || '更新失败',
            icon: 'none'
        })
    }
}

// 选择微信头像回调
const onChooseAvatar = async (e) => {
    if (e.detail && e.detail.avatarUrl) {
        // 先显示本地临时头像
        const tempAvatarUrl = e.detail.avatarUrl
        avatarUrl.value = tempAvatarUrl

        try {
            // 使用封装的上传方法
            const res = await request.upload('/file/upload', tempAvatarUrl)
            if (res.data) {
                avatarUrl.value = res.data
                uni.showToast({ title: '头像上传成功', icon: 'success' })
            }
        } catch (error) {
            uni.showToast({
                title: error.message || '头像上传失败',
                icon: 'none'
            })
            // 上传失败时恢复默认头像
            avatarUrl.value = '/static/avatar/default-avatar.png'
        }
    }
}
</script>

<style>
.edit-container {
    padding: 40rpx;
}

.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
}

.avatar-btn {
    position: relative;
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-tip {
    position: absolute;
    bottom: 10rpx;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 10rpx 0;
    border-radius: 20rpx;
}

.nickname-section {
    margin-bottom: 40rpx;
}

.nickname-input {
    width: 100%;
    font-size: 36rpx;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #eee;
}

.save-btn {
    width: 100%;
    background: #07c160;
    color: #fff;
    border-radius: 40rpx;
    font-size: 32rpx;
    padding: 20rpx 0;
    font-weight: bold;
}

.content {
    margin-top: 80rpx;
}
</style>
